waka.dev

2023-08-04 ブログの実装をWrangler v1からWrangler v3にアップデートした

このブログはCloudflare Workersで配信しているのだけど、ライブラリや実装の見直しをサボりにサボっていたため3年ぶりに更新した・・

開発環境でもあり、CLIツールでもあるWranglerがv3になっていたため、更新。
v3はリリースされている割りにまだexperimentalな機能も多いけど、個人ブログだしどうせ近いうちに上げることを考えるとv3を人柱的に使えばいいかなと。
Wranglerはv2からminiflareを使ったローカルでのエミュレート実行をサポートするようになり、v3でworkerdを使ったローカルでのWASM環境での実行をサポートするようになっていた。
以前は毎回開発環境にデプロイが必要だったので、これは本当に便利。ローカルKVもサポートしてるじゃん・・（ローカルでSQLiteファイルが作られ保存される）

以下にv1 -> v3に上げたことで修正した内容をメモしておく。

カスタムビルドツールがwebpackからesbuildに変わっていたため、webpack.config.jsを廃止。
webpackはDefinePluginでRSSのlastBuildAtやGitHubのアクセストークンを埋め込むために使っていただけだったので、「--var」オプションでビルドコマンド実行時に渡すように変えた。

TypeScriptをデフォルトでサポートしているので、こんな感じで指定すればよい

$ npx wrangler dev src/index.ts --env dev --var BUILD_DATE:$(date -d day '+%Y-%m-%d')

Node.jsのモジュールをコード内でrequireなどして使っている場合は、wrangler.tomlに node_compat = true を指定する必要がある。このブログだと中でpathモジュールを使っていたため指定した。

zone_idの指定が廃止されていたため、routeを使っている場合、zone_nameを指定する必要がある。
このブログでは本番環境で独自ドメインを割り当てて使っているため、指定した。

[env.production]
route = { pattern = "*waka.dev/*", zone_name = "waka.dev" }
kv_namespaces = [
  { ... }
]

kvのバルク実行で渡すJSONファイルのフォーマットが、以前は { "name": "キー名", value: "" } の配列だったのが、キー名の配列のみに変わっていた。
なので、KVのキャッシュをクリアしたい場合はこんな感じで指定すればいい。

$ npx wrangler kv:key list --binding=$YOUR_KV_NAMESPACE --env=production | xargs -0 -i node -pe 'JSON.stringify({}.map(a => { return a.name; }))' > cache.json
$ npx wrangler kv:bulk delete --env=production --binding=$YOUR_KV_NAMESPACE cache.json

実装はほぼ変えずに済んだのだけど、Wrangler v3でESM形式をサポートしていたので、合わせる形にした。
以前はWebWorker形式で、fetchイベントリスナを書く感じだったけど、fetchメソッドを実装してdefault exportすればよい。

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    return somePromise;
  }
}

Envには前述したビルドコマンド実行時に指定した「--var」のKeyValueが入っているので便利に使える。
（Envの型定義は自前で定義しておく必要がある）

また、KV等のbindingを使っている場合、envから呼び出す形になる。

const value: valueの型 | null = await env.YOUR_KV_NAMESPACE.get(key, 'json');
Copyright © @yo_waka